<template>
	<div class="pt-2 px-3 pb-6">
		<betting-amount
			class="text-t-3"
			labelT="betting.betAmount"
			:value="betslipStore.betAmountSum" />
		<betting-amount
			class="text-t-3"
			labelT="betting.awardAmount"
			:value="betslipStore.awardAmountSum"
			isPayout />
		<component :is="component" />
	</div>
</template>

<script lang="ts" setup>
import { BettingAmount } from '@/components/betting'
import BetslipSubmit from './betslip-submit.vue'
import BetslipLogin from './betslip-login.vue'
import BetslipBalance from './betslip-balance.vue'
import { useBetslipStore, useAccountStore, useWalletStore } from '@/store'
import { computed } from 'vue'

const betslipStore = useBetslipStore()
const accountStore = useAccountStore()
const walletStore = useWalletStore()

const component = computed(() => {
	if (!accountStore.isLogin) {
		return BetslipLogin
	} else if (betslipStore.betAmountSum && walletStore.balance < betslipStore.betAmountSum) {
		return BetslipBalance
	} else {
		return BetslipSubmit
	}
})
</script>
